<template>
	<view class="qrcode">
		<image class='qr-title' :src='codeTitleImg'></image>
		<view class='container'>
			<image   mode="scaleToFill" :src="imagePath"></image>
			<button class='btn' @tap="handleSavePoster()">保存</button>
		</view>
		
		<!-- 画布，用来画二维码，只用来站位，不用来显示-->
		<view class="canvas-code">
			<canvas :hidden="canvasHidden" style="width: 500rpx;height: 500rpx;background:#f1f1f1;" canvas-id="canvasCode" />
		</view>
		<view class="canvas-box">
			<canvas :hidden="canvasHidden" style="width: 750rpx;height: 1334rpx;background:#f1f1f1;" canvas-id="mycanvas" />
		</view>
	</view>
</template>

<script>
	import qrCode from '../../common/qrCode.js'
	export default {
		data() {
			return {
				canvasHidden: false,
				imagePath: '',
				codeTitleImg:'https://test.hrycf.com/hryxcx/codeTitle.png'
			}
		},
		onLoad: function(options) {
			let jiaoyanCode=''
            if(options.inviteId){
				console.log("执行")
			   jiaoyanCode = 'https://www.hrycf.com?invite='+options.inviteId;
			}else {
				jiaoyanCode='https://www.hrycf.com?invite='+''
			}
			console.log(jiaoyanCode);
			var size = this.setCanvasSize(); //动态设置画布大小 
			this.createQrCode(jiaoyanCode, "canvasCode", size.w, size.h);
			// this.createPoster()
		},
		methods:{
			//适配不同屏幕大小的canvas
			setCanvasSize(){
				var size = {};
				try {
					var res = uni.getSystemInfoSync();
					var scale = 750 / 500; //不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小
					var width = res.windowWidth / scale;
					var height = width; //canvas画布为正方形
					size.w = width;
					size.h = height;
					console.log(size.w,size.h)
				} catch (e) {
					// Do something when catch error
					console.log("获取设备信息失败" + e);
				}
				return size;
			},
			/**
			 * 绘制二维码图片
			 */
			createQrCode(url, canvasId, cavW, cavH) {
				uni.showLoading({
					title:'加载中...'
				})
				//调用插件中的draw方法，绘制二维码图片
				qrCode.api.draw(url, canvasId, cavW, cavH);
				setTimeout(() => {
					this.canvasToTempImage();
				}, 1000);
			},
			/**
			 * 获取临时缓存照片路径，存入data中
			 */
			canvasToTempImage() {
				var that = this;
				//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。
				uni.canvasToTempFilePath({
					canvasId: 'canvasCode',
					width:500,
					height:500,
					success: function(res) {
						var tempFilePath = res.tempFilePath;
						that.imagePath = tempFilePath
						that.createPoster()
						
					},
					fail: function(res) {
						console.log(res);
					}
				});
			},
			//生成海报
			createPoster(){
				let _that=this
				let ctx=uni.createCanvasContext('mycanvas')
				let res = uni.getSystemInfoSync();
				let scale = 750 / 750; //不同屏幕下canvas的适配比例；设计稿是750宽 686是因为样式wxss文件中设置的大小
				let c_width = res.windowWidth / scale;
				let c_height = res.windowHeight / scale; //canvas画布为正方形
				ctx.width=c_width
				ctx.height=c_height
				ctx.draw()
				//将网络图片转换为本地图片
				uni.getImageInfo({
					src:'https://test.hrycf.com/hryxcx/usercodeBground.jpg',
					success:(res)=>{
						ctx.save();
						ctx.drawImage(res.path,0,0,c_width,c_height);
						ctx.restore();
						ctx.draw(true);
						uni.getImageInfo({
							src:_that.codeTitleImg,
						    success:(res1)=>{
								ctx.save();
								ctx.drawImage(res1.path,c_width*0.25,100,c_width*0.5,c_width*0.5*0.5);
								ctx.restore();
								ctx.draw(true);
								uni.getImageInfo({
									src:_that.imagePath,
									success:(res2)=>{
										ctx.save();
										ctx.drawImage(res2.path,c_width*0.2,100+c_width*0.25+20,c_width*0.6,c_width*0.6);
										ctx.restore();
										ctx.draw(true);
										uni.hideLoading({
											
										})
									},
									fail:(err)=>{
										uni.showToast({
											title: '生成二维码失败',
											duration: 2000,
											icon: 'none'
										})
									}
								})
							},
							fail:(err)=>{
								uni.showToast({
									title: '生成二维码失败',
									duration: 2000,
									icon: 'none'
								})
							}
						})
					},
					fail:(err)=>{
						uni.showToast({
							title: '生成二维码失败',
							duration: 2000,
							icon: 'none'
						})
					}
				})
			},
			//保存海报
			handleSavePoster(){
				let _that=this
				wx.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									_that.saveImage()
								},fail(res){
									_that.auth = true
									uni.showToast({
										title: '请点击前往权限设置',
										duration: 2000,
										icon: 'none'
									})
								}
							})
						} else{
							_that.saveImage()
						}
					}
				})
			},
			saveImage(){
				let _this=this
				wx.showLoading({
						title: '保存中...'
					})
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: 750, // 画布的宽
					height: 1334, // 画布的高
					destWidth: (this.phoneW - 100) * 5,
					destHeight: (this.phoneH - 120) * 5,
					canvasId: 'mycanvas',
					success:(res)=>{
						console.log(res.tempFilePath)
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res2) {
								
								wx.hideLoading();
								uni.showToast({
									title: '图片保存成功到您的相册',
									duration: 2000,
									icon: 'none'
								})
							},
							fail() {
								uni.showToast({
									title: '保存失败，稍后再试',
									duration: 2000,
									icon: 'none'
								})
								wx.hideLoading();
							}
						})
					}
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.qrcode{
		width: 100%;
		background: url("https://test.hrycf.com/hryxcx/usercodeBground.jpg");
		background-size: 100% 100%;
		position: relative;
		.qr-title{
			display: block;
			width: 400rpx;
			height: 180rpx;
			position: absolute;
			left: 50%;
			top: 100rpx;
			transform: translate(-50%,0);
		}
	}
	.container {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		.btn{
			width: 300rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #FD8959;
			position: absolute;
			left: 50%;
			bottom: 50px;
			transform: translate(-50%,0);
			border: solid 1px #ffffff;
			color: #ffffff;
		}
	}

	.container image {
		width: 500rpx;
		height: 500rpx;
		position: absolute;
		display: block;
		top: 300rpx;
		left: 50%;
		transform: translate(-50%,0);
		background-color: #f9f9f9;
	}

	.canvas-box {
		position: fixed;
		top: 9999999rpx;
		left: 0;
	}
	.canvas-code{
		position: fixed;
		top: 999999rpx;
		left: 0;
	}
</style>
